<template>
	<div class="swiper-container">
	    <div class="swiper-wrapper" v-if="imgs.length">
	        <div class="swiper-slide" v-for="imglist in imgs"><img :src="imglist.imgurl"/></div>
	        <!--<div class="swiper-slide"><img src="../assets/01958ad3ae2269374ad6521fd09b1a750fca9b7d.jpg" /></div>
			<div class="swiper-slide"><img src="../assets/10cbe38e032c3c2733ce69d10a0e8492b35f128e.jpg" /></div>
			<div class="swiper-slide"><img src="../assets/696d338ce4a91419eb2cad0987b655ba8a705005.jpg" /></div>
			<div class="swiper-slide"><img src="../assets/b40a14935757d8293addbf420edd7b892fbf4587.jpg" /></div>
			<div class="swiper-slide"><img src="../assets/696d338ce4a91419eb2cad0987b655ba8a705005.jpg" /></div>-->
			<!--<div class="swiper-slide"><img src="https://i0.hdslb.com/bfs/archive/40b6b861b60b992d71e7a847a32c5a477fa7e9b1.jpg@480w_300h.webp" /></div>
			<div class="swiper-slide"><img src="https://i0.hdslb.com/bfs/archive/01958ad3ae2269374ad6521fd09b1a750fca9b7d.jpg@480w_300h.webp" /></div>
			<div class="swiper-slide"><img src="https://i0.hdslb.com/bfs/archive/fca7261328dcd88e719406718808e87acbad3a89.jpg@480w_300h.webp" /></div>
			<div class="swiper-slide"><img src="https://i0.hdslb.com/bfs/archive/b40a14935757d8293addbf420edd7b892fbf4587.jpg@480w_300h.webp" /></div>
			<div class="swiper-slide"><img src="https://i0.hdslb.com/bfs/archive/10cbe38e032c3c2733ce69d10a0e8492b35f128e.jpg@480w_300h.webp" /></div>-->
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="lla">
	    	<div class="swiper-pagination">
	    	</div>
    	</div>
	</div>
</template>

<script>
  import Swiper from 'swiper';
  export default {
	data(){
      return{
      	imgs: [
      	  { imgurl: 'http://i0.hdslb.com/bfs/archive/fe71f76b1b1b2a122a3ee3e584b098785c9b2df0.jpg' },
      	  { imgurl: 'http://i0.hdslb.com/bfs/archive/616501afa01cfdb9696287b061942fb0771076f8.jpg' },
      	  { imgurl: 'http://i0.hdslb.com/bfs/archive/44d65caed70e887fc73036b98ddeafd734fc171f.jpg' },
	    ]
	  }
   },
	mounted() {
		this.carousel()
	},
	methods:{
		carousel(){
			var swiper = new Swiper('.swiper-container', {
				direction: 'horizontal',
				slidesPerView: 1,
				spaceBetween: 0,
				loop: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				}
			});
		}
	}
  }
</script>

<style lang="scss">
	@import "../scss/swiper.min";
	.content{
		width: 100%;
	}
	.swiper-container {
	    width: 100%;
	    height: auto;
	    img{
	    	width: 100%;
	    }
	    .lla{
	    	position: absolute;
	    	text-align: center;
	    	bottom: 15%;
	    	line-height: 0;
	    	left: 0;
	    	width: 100%;
	    	z-index: 50;
	    }
	    .swiper-pagination{
    	    background-color: rgba(0,0,0,.5);
		    border-radius: 5px;
		    padding: 2px 3px 0;
		    height: 10px;
		    display: inline-block;
		    width: auto;
		    position: initial;
	    	.swiper-pagination-bullet{
			    background-color: #fff;
			    margin: 0 3px;
			    opacity: 1;
			    width: 5px;
			    height: 5px;
			    vertical-align: middle;
			    float: left;
			}
			.swiper-pagination-bullet-active{
				background-color: #de698c;
			}
			
	    }
	    
	}  
</style>